import { createAlova, Method } from "alova"
import GlobalFetch from "alova/GlobalFetch"
import VueHook from "alova/vue"

const alovaInstance = createAlova({
	baseURL: "/api",
	// 在vue项目下引入VueHook，它可以帮我们用vue的ref函数创建请求相关的，可以被alova管理的状态
	statesHook: VueHook,
	// 请求适配器，这里我们使用fetch请求适配器
	requestAdapter: GlobalFetch(),
	// 设置全局的请求拦截器，与axios相似
	beforeRequest(method: Method<any>) {
		// 假设我们需要添加token到请求头
		method.config.headers.token = "token"
	},
	// 响应拦截器
	responded: {
		// 请求成功的拦截器
		// 当使用GlobalFetch请求适配器时，第一个参数接收Response对象
		// 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
		onSuccess: async (response, config: Method<any>) => {
			const json = await response.json()
			if (json.code !== 200) {
				// 抛出错误或返回reject状态的Promise实例时，此请求将抛出错误
				throw new Error(json.message)
			}

			// 解析的响应数据将传给method实例的transformData钩子函数，这些函数将在后续讲解
			return json.data
		},
		// 请求失败的拦截器
		// 请求错误时将会进入该拦截器。
		// 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
		onError: (err, method: Method<any>) => {
			throw new Error(err.message)
		},
		// 请求完成的拦截器
		// 当你需要在请求不论是成功、失败、还是命中缓存都需要执行的逻辑时，可以在创建alova实例时指定全局的`onComplete`拦截器，例如关闭请求 loading 状态。
		// 接收当前请求的method实例
		onComplete: async (method: Method<any>) => {}
	}
})

export default alovaInstance
